<template>
  <div class="rollNum-main">
    <ul :class="className">
      <!-- 需要显示6列 -->
      <li ref="li" v-for="i in numL" :key="i">
        <!-- 每列中的10行数字 -->
        <span v-for="num in 10" :key="num">{{ num - 1 }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'RollNum',
  components: {},
  props: {
    num: {
      type: [Number, String]
      //   default: "200",
    },
    numL: {
      type: Number,
      default: 4
    },
    className: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      newNum: ''
    }
  },
  computed: {},
  created () {
    this.newNum = this.num
    setInterval(() => {
      this.toOrderNum(this.newNum, this.$refs.li)
    }, 1000)
  },
  mounted () {
  },
  watch: {
    num (newVal) {
      this.newNum = newVal
    }
  },

  methods: {
    // 处理数字
    toOrderNum (num, el) {
      if (!num) {
        return
      }
      num = num.toString()
      // 把数变成字符串
      if (num.length < this.numL) {
        num = '0' + num // 如未满八位数，添加"0"补位
        this.toOrderNum(num, el) // 递归添加"0"补位
      } else if (num.length === this.numL) {
        const numArr = num.split('') // 将其便变成数据，渲染至滚动数组
        el.forEach((item, index) => {
          let ty = numArr[index]
          let basenum = this.className === 'big' ? 113 : 100
          let bs = basenum * ty
          item.style.transform = `translate(0%, -${bs}%)`
        })
      } else {
        this.$message.warning('数字过大，显示异常，请联系客服')
      }
    }
  }
}
</script>

<style scoped lang="less">
@font-face {
  font-family: 'LCD2';
  src: url('../assets/font/LCD2-Ultra.ttf')
}
ul {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
&.big{
  li {
    width:32px;
    height:46px;
    line-height: 46px;
    margin-left: 1px;
    margin-right: 1px;
    span {
      font-size: 32px;
      //font-weight: 600;
      color: #00FFFE;
      letter-spacing: 3px;
      line-height: 40px;
      font-family: 'LCD2';
      text-align: center;
      background: url('../assets/img/page/numbgs.svg') no-repeat;
      background-size: 100% 100%;
      display: inline-block;
      width: 100%;
      height: 100%;

    }
  }
}

  li {
    width: 24px;
    height: 28px;
    flex-direction: column;
    //transition: transform 1s ease-in-out;
    list-style-type: none;
    margin-left: 5px;
    margin-right: 5px;
    transition-duration: .8s;

    span {
      font-size: 20px;
      font-weight: 500;
      color: #00FFFE;
      letter-spacing: 3px;
      line-height: 28px;
      font-family: 'LCD2';
      text-align: center;
      background: url('../assets/img/page/numbgs.svg') no-repeat;
      background-size: 100% 100%;
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
}

</style>
